<template>
    <view class="works-item" @click="viewWorks">
        <LazyImage class="cover-image" :src="worksData.cover_url" mode="aspectFill" :imageStyle="imageStyle"></LazyImage>
        <view class="infos-wrap">
            <view class="infos">
                <view class="title">{{ worksData.name }}</view>
                <view class="u-p-t-22">{{ formatTime(worksData.date) }}</view>
                <view class="view-like">
                    <view class="view-info expand-click" >
                        <image src="../../static/works/view-icon.png" mode=""></image>
                        <view class="">{{ worksData.browse_count }}</view>
                    </view>
                    <view class="like-info expand-click" >
                        <image src="../../static/works/like-icon.png" mode=""></image>
                        <view class="">{{ worksData.like_count }}</view>
                    </view>
                </view>
            </view>
            <view class="btns">
                <view class="flex flex-v-center u-m-l-40 expand-click" @click.stop="clickIcon('edit')">
                    <image src="../../static/works/edit-icon.png" mode="" class="u-m-r-14"></image>
                    <view class="">编辑</view>
                </view>
                <view class="flex flex-v-center u-m-l-40 expand-click" @click.stop="clickIcon('share')">
                    <image src="../../static/works/share-icon.png" mode="" class="u-m-r-14"></image>
                    <view class="">分享</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import LazyImage from '@/components/LazyImage/index.vue';
export default {
    name: 'WorksItem',
    data() {
        return {
            worksStatus: 1,
            imageStyle: {
                width: '100%',
                height: '100%',
                borderRadius: '10rpx 0 0 10rpx'
            }
        };
    },
    props: {
        worksData: {
            type: Object,
            default: function() {
                return {};
            }
        }
    },
    created() {
  
    },
    computed: {},
    methods: {
        // 点击编辑或者分享
        clickIcon(type) {
            this.$emit('clickIcon', {
                worksData: this.worksData,
                type: type
            });
        },
        // 格式化时间
        formatTime(date) {
            return this.$u.timeFormat(new Date(date.replace(/-/g, '/')).getTime(), 'yyyy/mm/dd');
        },
        viewWorks(){
            this.$emit('viewWorks',this.worksData)
        }
    },
    components: {
        LazyImage
    }
};
</script>
<style lang="scss" scoped>
.works-item {
    margin: 0 30rpx 50rpx;
    width: 690rpx;
    height: 250rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(234, 234, 234, 0.5);
    border-radius: 10rpx;
    display: flex;
    .cover-image {
        width: 250rpx;
        height: 250rpx;
        background-color: #dddddd;
        border-radius: 10rpx 0 0 10rpx;
        flex-shrink: 0;
    }
    .infos-wrap {
        flex-grow: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20rpx 30rpx;
        overflow: hidden;
        .infos {
            width: 100%;
            overflow: hidden;
            font-size: 28rpx;
            color: #abb3b8;
            .title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 34rpx;
                line-height: 34rpx;
                color: #262832;
            }
            .view-like {
                display: flex;
                align-items: center;
                padding-top: 20rpx;
                .view-info,
                .like-info {
                    display: flex;
                    align-items: center;
                    padding-right: 24rpx;
                    position: relative;
                }
                .view-info {
                    image {
                        width: 30rpx;
                        height: 20rpx;
                        margin-right: 16rpx;
                    }
                }
                .like-info {
                    image {
                        width: 26rpx;
                        height: 23rpx;
                        margin-right: 16rpx;
                    }
                }
            }
        }
        .btns {
            display: flex;
            justify-content: flex-end;
            font-size: 28rpx;
            line-height: 28rpx;
            image {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }
}
</style>
